import { fallbackVar, globalStyle, style } from '@vanilla-extract/css';
import { emptyStyle } from '../empty/empty.css';
import { vars } from '../../theme/vars.css';
import { GRID_CELL_PADDING, GRID_LINE_HEIGHT } from '../gridBaseConfig';
import { gridCellPaddingVar, gridLineHeightVar } from '../grid/grid.css';

export const tableStyle = style({
	background: vars.color.panelBackground,
	position: 'relative',
	display: 'flex',
	flexDirection: 'column',
	padding: '0',
	borderRadius: vars.layout.smallRadius,
	overflow: 'auto',
	border: `1px solid ${vars.color.border}`,
	outline: 'none',
	selectors: {
		'&[activable]': {
			WebkitUserSelect: 'none',
			userSelect: 'none',
		},
	},
});

globalStyle(`${tableStyle}>table`, {
	display: 'table',
	width: '100%',
	tableLayout: 'fixed',
	borderCollapse: 'separate',
	borderSpacing: '0',
	borderRadius: vars.layout.smallRadius,
	border: 'none',
	margin: '0',
});

globalStyle(`${tableStyle}>div.empty`, {
	flex: '1',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	position: 'sticky',
	left: '0',
});

globalStyle(`${tableStyle}[column-size=scale]`, {
	overflowX: 'hidden',
});

globalStyle(`${tableStyle}[column-size=fixed]>table`, {
	width: 'max-content',
});

globalStyle(`${tableStyle}[column-size=scale]>table`, {
	overflowX: 'hidden',
	width: '100%',
});

globalStyle(`${tableStyle} tr`, {
	minHeight: '1.5em',
	cursor: 'default',
});

// resize column
globalStyle(`${tableStyle} th>div`, {
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center',
	WebkitUserSelect: 'none',
	userSelect: 'none',
});

globalStyle(`${tableStyle} th>div.handle`, {
	position: 'absolute',
	cursor: 'col-resize',
	width: '11px',
	right: '-5px',
	top: '0',
	bottom: '0',
	zIndex: '1',
});

globalStyle(`${tableStyle} th:last-child>div.handle`, {
	width: '15px',
	right: '-7px',
});

globalStyle(`${tableStyle} th>div:first-child,${tableStyle} td`, {
	overflow: 'hidden',
});

// borders
globalStyle(`${tableStyle} th,${tableStyle} td`, {
	boxSizing: 'border-box',
	position: 'relative',
	padding: fallbackVar(gridCellPaddingVar, GRID_CELL_PADDING),
	lineHeight: fallbackVar(gridLineHeightVar, GRID_LINE_HEIGHT),
	borderBottom: `1px solid ${vars.color.border}`,
	backgroundColor: vars.color.panelBackground,
});
globalStyle(`${tableStyle} th`, {
	backgroundColor: vars.color.panelBackground,
});

globalStyle(`${tableStyle}.highligh-hover tr:hover>td`, {
	backgroundColor: vars.color.windowBackground,
});

globalStyle(`${tableStyle} tr.active>td,${tableStyle} tr.active:hover>td`, {
	backgroundColor: vars.color.selectionBlur,
});

globalStyle(`${tableStyle}:focus tr.active>td,${tableStyle}:focus tr.active:hover>td`, {
	backgroundColor: vars.color.selection,
});

globalStyle(`${tableStyle} th.rb,${tableStyle} td.rb,${tableStyle}[column-border] th,${tableStyle}[column-border] td`, {
	borderRight: `1px solid ${vars.color.border}`,
});

globalStyle(`${tableStyle} tr:last-child td`, {
	borderBottom: 'none',
});

globalStyle(
	`${tableStyle}[column-size=scale] th:last-child,${tableStyle}[column-size=scale] td:last-child,${tableStyle}[column-size=auto] th:last-child, ${tableStyle}[column-size=auto] td:last-child`,
	{
		borderRight: 'none',
		overflow: 'hidden',
	}
);

// sort
globalStyle(`${tableStyle} th.sort`, {
	cursor: 'pointer',
});

globalStyle(`${tableStyle} th span.sort svg`, {
	width: '1.4em',
	height: '1.4em',
	fill: vars.color.disabledText,
});

globalStyle(`${tableStyle} th span.sort.asc svg`, {
	fill: vars.color.accent,
});

globalStyle(`${tableStyle} th span.sort.desc svg`, {
	fill: vars.color.accent,
});

// text align
globalStyle(`${tableStyle} .left`, {
	textAlign: 'left',
});

globalStyle(`${tableStyle} .center`, {
	textAlign: 'center',
});

globalStyle(`${tableStyle} .right`, {
	textAlign: 'right',
});

globalStyle(`${tableStyle} ${emptyStyle}`, {
	margin: '1.5em',
});

// fixed header
globalStyle(`${tableStyle} thead`, {
	position: 'sticky',
	top: '0px',
	zIndex: '2',
});
